<template>
	<view class="container radius-8" :class="mode">
		<view class="title flex center text-white text-bold bg-gray" :class="state===1?'bg-primary':'bg-disabled'">
			<text>{{title}}</text>
		</view>
		<view class="code-box flex-col item-center" style="background-color:white;">
			<view class="code-img relative radius-16 overflow-hidden flex center">
				<!-- <canvas class="absolute" id="qrcode" canvas-id="qrcode" :style="`width:${size}px;height:${size}px;`"></canvas> -->
				<!-- Canvas 2D -->
				<!-- <canvas type="2d" id="qrcode" canvas-id="qrcode" :style="`width:${size-margin*2}px;height:${size-margin*2}px;`"></canvas> -->
				<!-- 高级用法 -->
				<!-- <view :class="`p-${margin}`" :style="`width:${size}px;height:${size}px;`">
					<view v-for="(row, rowI) in modules" :key="rowI" style="display:flex;flex-direction:row;">
						<view v-for="(col, colI) in row" :key="colI">
							<view v-if="col.isBlack" class="size-6" style="background-color:black;"></view>
							<view v-else class="size-6" style="background-color:white;"></view>
						</view>
					</view>
				</view> -->
				<image :style="`width:${size - margin * 2}px;height:${size - margin * 2}px;`" :src="base64Img"></image>
				<image class="absolute top-0 right-0 w-80 h-60" src="https://huodtg.oss-cn-hangzhou.aliyuncs.com/hd/miniprogram/slice_2.png"></image>
				<view v-if="state!==1" class="flag-box">
					<image v-if="state===4||isExpire" class="flag" src="./flag-expired.svg"></image>
					<image v-else-if="state===3" class="flag" src="./flag-invalid.svg"></image>
					<image v-else-if="state===2" class="flag" src="./flag-checked.svg"></image>
				</view>
			</view>
			<text class="text text-bold">核销码：{{value}}</text>
		</view>
	</view>
</template>

<script setup>
	import { onReady } from '@dcloudio/uni-app'
	import { computed, onMounted, ref, getCurrentInstance } from 'vue'
	// import UQRCode from '@/pagesA/uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js'
	import { getVerifyCodeImgApi } from '@/api/order.js'
	
	const props = defineProps({
		title: {
			type: String,
			default: '核销码'
		},
		value: {
			type: [String, Number],
			required: true
		},
		// 状态(1-待核销，2-已核销，3-已取消，4-已过期)
		state: {
			type: Number,
			default: 1
		},
		mode: {
			type: String,
			default: 'inline'
		},
		isExpire: {
			type: Boolean,
			default: false
		}
	})
	
	const instance = getCurrentInstance()
	
	const size = computed(() => {
		return props.mode === 'dialog' ? 240 : 184
	})
	const margin = computed(() => {
		return props.mode === 'dialog' ? 30 : 22
	})
	
	const base64Img = ref('')
	const getVerifyCodeImg = () => {
		getVerifyCodeImgApi(props.value).then(res => {
			base64Img.value = res
		})
	}

	onMounted(() => {
		getVerifyCodeImg()
	})

	const modules = ref([])
	onReady(() => {
		/*
		const qr = new UQRCode()
		qr.data = props.value
		qr.size = size.value - margin.value * 2
		// qr.margin = margin.value
		qr.make()
		// const ctx = uni.createCanvasContext('qrcode', instance)
		// qr.canvasContext = ctx
		// qr.drawCanvas()
		
		console.log('ss', qr, size.value, margin.value, uni.getSystemInfoSync().devicePixelRatio)
		
		// 添加属性 type="2d"
		const query = uni.createSelectorQuery()
		query.in(instance).select('#qrcode')
			.fields({ node: true, size: true })
			.exec((res) => {
				const canvas = res[0].node
				const ctx = canvas.getContext('2d')
				const dpr = uni.getSystemInfoSync().pixelRatio
				canvas.width = res[0].width * dpr
				canvas.height = res[0].height * dpr
				ctx.scale(dpr, dpr)
				qr.canvasContext = ctx
				qr.drawCanvas()
				console.log('画板', res, canvas, dpr)
			})
		*/
		/**
		 * Canvas 2D
		 */
		/*
		const qr = new UQRCode()
		qr.data = props.value
		qr.size = size.value - margin.value * 2
		qr.make()
		// console.log('ss', qr, size.value, margin.value, uni.getSystemInfoSync().devicePixelRatio)
		const query = uni.createSelectorQuery()
		query.in(instance).select('#qrcode')
			.fields({ node: true, size: true })
			.exec((res) => {
				const canvas = res[0].node
				const ctx = canvas.getContext('2d')
				const dpr = uni.getSystemInfoSync().pixelRatio
				canvas.width = res[0].width * dpr
				canvas.height = res[0].height * dpr
				ctx.scale(dpr, dpr)
				qr.canvasContext = ctx
				qr.drawCanvas()
				// console.log('画板', res, canvas, dpr)
			})
		*/
		/**
		 * 高级用法
		//*
		const qr = new UQRCode()
		qr.data = props.value
		qr.size = size.value
		qr.margin = margin.value
		qr.make()
		modules.value = qr.modules
		console.log('ss', qr)
		*/
	})
</script>

<style lang="scss" scoped>
	.dialog {
		&.container {
			background-color: #fff;
			box-shadow: 0px 1.534px 6.134px 0px rgba(0, 0, 0, 0.15);
			overflow: hidden;
		}
		.title {
			height: 73px;
			font-size: 24px;
			padding: 0 10px;
		}
		.code-box {
			padding: 20px;
		}
		.code-img {
			width: 240px;
			height: 240px;
			border-radius: 24px;
			overflow: hidden;
			// filter: drop-shadow(2px 2px 8px rgba(0, 0, 0, 0.15));
			box-shadow: 0px 1.534px 6.134px 0px rgba(0, 0, 0, 0.15);
		}
		.flag-box {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			width: 114px;
			height: 114px;
			border-radius: 50%;
			background: rgba(51, 51, 51, 0.60);
			display: flex;
			justify-content: center;
			align-items: center;
			
			.flag {
				width: 80px;
				height: 80px;
			}
		}
		.text {
			margin-top: 16px;
			font-size: 20px;
		}
	}
	
	.inline {
		&.container {
			box-shadow: 0px 1.534px 6.134px 0px rgba(0, 0, 0, 0.15);
			overflow: hidden;
		}
		.title {
			height: 56px;
			font-size: 18px;
		}
		.code-box {
			padding: 15px;
		}
		.code-img {
			width: 184px;
			height: 184px;
			border-radius: 18px;
			overflow: hidden;
			// filter: drop-shadow(2px 2px 8px rgba(0, 0, 0, 0.15));
			box-shadow: 0px 1.534px 6.134px 0px rgba(0, 0, 0, 0.15);
		}
		.flag-box {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			width: 80px;
			height: 80px;
			border-radius: 50%;
			background: rgba(51, 51, 51, 0.60);
			display: flex;
			justify-content: center;
			align-items: center;
			
			.flag {
				width: 56px;
				height: 56px;
			}
		}
		.text {
			margin-top: 12px;
			font-size: 15px;
		}
	}
</style>